<template>
   <button
   v-for="(_, tab) in tabs"
 :key="tab"
   :class="['tab-button', { active: currentTab === tab }]"
    @click="currentTab = tab"
   >
    {{ tab }}
   </button>
   <hr />
   <KeepAlive >
    <component :is="tabs[currentTab]" class="tab"></component>
   </KeepAlive>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import game from './components/game.vue'
  import todoList from './components/todo-list.vue';
  
  
  // 设置默认激活的案例
  const currentTab = ref('game')
  
  // 把案例组件组织为tabs对象
  const tabs = {
    game,
    todoList
  }
  </script>